<template>
  <div class="content">
    <h2>{{paper.title}}</h2>
    <span>总分：{{paper.score}}分</span>
    <el-collapse v-model="activeNames" @change="handleChange" id="content">
      <el-collapse-item  title="一、选择题" name="1">
        <el-form>
          <el-form-item
          :key="index"
          :label="index + 1 + '.'"
          v-for="(item, index) in choicesProblem"
          class="exam-question-item"
          label-width="50px">
          <div style="text-align:left">
            <span style="padding-right: 10px;">{{
                  item.title +"("+ item.score +"分)"
                }}</span>
          </div>
          <div style="text-align:left;padding-left: 20px;">
              <el-radio v-for="answer in item.answers" :key="answer.prefix" :label="answer.prefix">
                {{ answer.prefix + ".   " + answer.content }}
              </el-radio>
          </div>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="二、判断题" name="2">
        <el-form>
          <el-form-item
          :key="index"
          :label="index + 1 + '.'"
          v-for="(item, index) in trueOrFalse"
          class="exam-question-item"
          label-width="50px">
          <div style="text-align:left">
            <span style="padding-right: 10px;">{{
                  item.title +"("+ item.score +"分)"
                }}</span>
          </div>
          <div style="text-align:left;padding-left: 20px;">
              <el-radio v-for="answer in item.answers" :key="answer.prefix" :label="answer.prefix">
                {{ answer.prefix + ".   " + answer.content }}
              </el-radio>
          </div>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="三、编程题" name="3">
        <el-table size="mini" :data="programmingQuestions" border fit stripe highlight-current-row width="100%">
          <el-table-column type="expand">
             <template slot-scope="props">
             <program-detail :question="props.row"></program-detail>
             </template>
          </el-table-column>
          <el-table-column prop="id" label="题目id" width="90" align="center"></el-table-column>
          <el-table-column prop="title" align="center" label="题干" show-overflow-tooltip />
          <el-table-column  prop="score" align="center" label="分数" width="100px"/>
          <el-table-column sortable align="center" prop="level" label="难度" width="100px">
            <template v-slot="{ row }">
              {{ levelChange(row.level) }}
            </template>
          </el-table-column>
          <el-table-column prop="tags" align="center" label="知识点" width="200">
            <template v-slot="{ row }">
              <el-tag v-for="item in row.tags" :key="item.index">{{ item.name }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
  import {
    showPaperDetail,

  } from "@/api/task.js";
  import programDetail from "@/components/programDetail.vue";
  export default {
    components: {
    programDetail,
  },
    name: "paperView",
    data() {
      return {
        activeNames: ['1'],
        choicesProblem: [],
        trueOrFalse: [],
        programmingQuestions: [],
        paper: null,

      };
    },
    computed: {
        levelChange() {
            let levels = ["easy", "medium", "hard", "insuperable", "hell"];
            return val => {
                return levels[val];
            };
        }
    },
    created() {
      this.user = JSON.parse(localStorage.getItem("user"));
      console.log(this.$route.query.id);
      this.initData();
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      //初始化数据
    async initData() {
      const loading = this.$loading({
        lock: true,
        text: "试卷加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let obj = {
        testPaperId: this.$route.query.id,
      };
      await showPaperDetail(obj).then(res => {
        console.log(res.data, "初始化响应数据");
        this.paper = res.data;
        this.choicesProblem = res.data.choicesProblem;
        this.trueOrFalse = res.data.trueOrFalse;
        this.programmingQuestions = res.data.programmingQuestions;
      });
      loading.close();
    },

    },
  }
</script>


<style lang="scss" scoped>
  .content {
    background-color: rgb(255, 255, 255);
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: flex-start
  }
</style>